<mat-sidenav-container class="sidenav-container">
  <mat-sidenav
    #drawer
    class="sidenav"
    fixedInViewport="true"
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="!(isHandset$ | async)"
  >
    <mat-toolbar color="primary">Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item [routerLink]="['/dashboard']">Dashboard</a>
      <a mat-list-item [routerLink]="['/todo']">To Do List</a>
      <a mat-list-item [routerLink]="['/todo-add']">Add Todo</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="(isHandset$ | async)"
      >
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>angular-client</span>

      <span class="toolbar-spacer"></span>

      <span *ngIf="oidc.userAvailable">{{ oidc.user.profile.name }}</span>

      <button mat-button [matMenuTriggerFor]="menu"><mat-icon>more_vert</mat-icon></button>

      <mat-menu #menu="matMenu">
        <button mat-menu-item *ngIf="!oidc.userAvailable" (click)="oidc.triggerSignIn()">
          登录
        </button>
        <button mat-menu-item *ngIf="oidc.userAvailable" (click)="oidc.triggerSignOut()">
          登出
        </button>
      </mat-menu>
    </mat-toolbar>
    <!-- Add Content Here -->
    <div class="router-outlet-container">
      <router-outlet></router-outlet>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>
